<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX发送GET请求并传递参数</title>
	</head>
	<body>
		<ul id="list"></ul>
		<script>
			var listElement = document.getElementById('list');
			// 发送请求获取列表数据呈现在页面
			// ==========================================\\
			var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject('Microsoft.XMLHTTP')
			xhr.open('GET','users.php')
			xhr.send()
			xhr.addEventListener('readystatechange',function () {
				if(this.readyState !== 4) return;
				var data = JSON.parse(this.responseText)
				// data => 数据
				for(var i = 0; i < data.length; i++) {
					var liElement = document.createElement('li')
					liElement.innerHTML = data[i].name
					liElement.id = data[i].id
					
					listElement.appendChild(liElement)
					
					liElement.addEventListener('click',function() {
						// TODO: 通过AJAX操作获取服务端对应数据的信息
						// 如何获取当前被点击元素对应数据的ID
						// console.log(this.id)
						var xhr1 = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
						xhr1.open('GET','users.php?id=' + this.id)
						xhr1.send()
						xhr1.addEventListener('readystatechange',function() {
							if (this.readyState !== 4) return;
							var obj = JSON.parse(this.responseText)
							alert(obj.age)
						})
						
						
						
					})
					
				}
				
			})
		</script>
		
	</body>
</html>
